<style scoped lang="scss">
	.le-box{
		width: 100%;
		height: 800px;
		flex: 1;
		border: 1px solid #E5E5E5;
		.hred{
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #E5E5E5;
			>div{
				font-size: 14px;
				flex: 1;
				display: flex;
				justify-content: center;
			}
		}
		.content{
			display: flex;
			flex: 1;
			flex-direction: column;
			padding-top: 40px;
			.content-star{
				width: 100%;
				display: flex;
				flex-direction: column;
				line-height: 40px;
				padding: 0 10px;
				box-sizing: border-box;
				li{
					width: 100%;
					height: 40px;
					display: flex;
					flex: 1;
					margin-bottom: 20px;
					align-items: center;
					.icon-star{
						color: #1973bf;
						font-size: 28px;
					}
					.icon-xingping{
						font-size: 28px;
						color: #ccc;
					}
					.star-w{
						width: 200px;
					}
				}
			}
		}
		.m-l-40{
			margin-left: 40px;
		}
		.flex{
			flex: 1;
			display: flex;
			justify-content: center;
		}
	}
</style>
<template>
	<div class="le-box">
		<div class="hred">
			<div>星级</div>
			<div>星级名称</div>
			<div>折扣率</div>
		</div>
		<div class="content">
			<ul class="content-star" v-if="levelInfo">
				<li>
					<div class="flex">
						<span class="iconfont icon-star"></span>
						<span class="iconfont icon-xingping"></span>
						<span class="iconfont icon-xingping "></span>
					</div>
					<el-input class="star-w m-l-40 flex" placeholder="请填写" v-model="levelInfo.star1Name"/>
					<el-input class="star-w m-l-40 flex" type="number" v-model="levelInfo.star1Discount"/>
					<span class="m-l-10">%</span>
				</li>
				<li>
					<div class="flex">
						<span class="iconfont icon-star"></span>
						<span class="iconfont icon-star"></span>
						<span class="iconfont icon-xingping "></span>
					</div>
					<el-input class="star-w m-l-40 flex" placeholder="请填写" v-model="levelInfo.star2Name"/>
					<el-input class="star-w m-l-40 flex" type="number" v-model="levelInfo.star2Discount"/>
					<span class="m-l-10">%</span>
				</li>
				<li>
					<div class="flex">
						<span class="iconfont icon-star"></span>
						<span class="iconfont icon-star"></span>
						<span class="iconfont icon-star"></span>
					</div>
					
					<el-input class="star-w m-l-40 flex" placeholder="请填写" v-model="levelInfo.star3Name"/>
					<el-input class="star-w m-l-40 flex" type="number" v-model="levelInfo.star3Discount"/>
					<span class="m-l-10">%</span>
				</li>
			</ul>
			<el-row class="p-all-20" style="text-align: center;" v-if="levelInfo">
				<el-button type="primary" @click="saveLevelFn">保存</el-button>
			</el-row>
		</div>
	</div>
</template>
<script>
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				levelInfo: null
			}
		},
		created() {
			this._initData()
		},
		methods: {
			_initData() {
				this.$ajax({
					api: 'member/discount/query',
					params: {
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS ) {
						this.levelInfo = res.data
					}
					
				}).catch(err => {
					this.$message({
						type:'success',
						message: err.message
					})
				})
			},
			saveLevelFn() {
				let info = this.levelInfo
				if(!info.star1Name || !info.star1Discount || !info.star2Name || !info.star2Discount || !info.star3Name || !info.star3Discount) {
					this.$message({
						type: 'error',
						message: '请填写完整信息'
					})
					return
				}
				this.$ajax({
					api: 'member/discount/save',
					params: {
						star1Name: info.star1Name,
						star2Name: info.star2Name,
						star3Name: info.star3Name,
						star1Discount: info.star1Discount,
						star2Discount: info.star2Discount,
						star3Discount: info.star3Discount,
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
					}
				}).then(res => {
					if(res.status === SUCCESS_REQUEST_STATUS ) {
						this.$message({
							type: 'success',
							message: '保存成功'
						})
					}
				})
			}
		}
	}
</script>